import { createStore } from 'vuex';  // 正确导入 createStore
import vuexPersistedState from 'vuex-persistedstate'

const store = createStore({
  state: { // 状态:存储数据的地方，仓库
    // 这里可以定义你的状态数据
    editableTabsValue: '/index',
    editableTabs: [
      {
        title: '首页',
        name: '/index'
      }
    ]
  },
  getters: { // 计算属性：状态中派生出新的数据
    // 可以在这里定义基于 state 的计算属性
  },
  mutations: { // 变更：唯一能改变仓库数据的方法，必须是同步的。
    // 你可以在这里定义更改 state 数据的方法
    // 添加标签
    INIT: (state) => {
      state.editableTabsValue = '/index'
      state.editableTabs = [{
        title: '首页',
        name: '/index'
      }]
    },

    ADD_TABS: (state, tab) => {
        if (state.editableTabs.findIndex(e => e.name === tab.path) === -1) {
          state.editableTabs.push({
            title: tab.name,
            name: tab.path
          })
        }
        state.editableTabsValue = tab.path
        console.log(state.editableTabsValue)
      },
    
    SET_TABVALUE:(state,value) => {
      state.editableTabsValue = value
    },

    REMOVE_TABS: (state, tab) => {

        // 如果只剩下一个标签（首页），则不允许删除
        if (state.editableTabs.length === 1) {
          console.log('不能删除唯一的标签');
          return; // 直接返回，不执行删除操作
        }

        // 找到当前激活标签的索引
        const index = state.editableTabs.findIndex(e => e.name === tab.name);
        
        // 如果找到该标签，删除它
        if (index !== -1) {
          state.editableTabs.splice(index, 1);
        }
        
        // 如果删除的标签是当前激活的标签，则设置为默认标签或下一个标签
        if (state.editableTabsValue === tab.name) {
          // 如果删除的是最后一个标签（即只有首页），则将标签值设置为首页
          if (state.editableTabs.length > 0) {
            // 如果还有其他标签，激活第一个标签
            state.editableTabsValue = state.editableTabs[0].name;
          } else {
            // 如果没有其他标签，默认设置首页
            state.editableTabsValue = '/index';
          }
        }
      },
  },

  actions: { // 动作：可以包含异步逻辑（如 API 请求），完成后调用 Mutation 改数据。
    // 你可以在这里定义处理异步请求的函数
  },

  modules: { // 模块：拆成小的存储仓库
    // 如果你有多个模块，可以在这里拆分
  },
  plugins: [
    vuexPersistedState({
      key: 'vuex', // 确保使用正确的键名
      storage: window.localStorage, // 确保使用 localStorage
      reducer(state) {
        // 可以选择存储特定的部分，避免存储不需要的状态
        return {
          editableTabsValue: state.editableTabsValue,
          editableTabs: state.editableTabs
        };
      }
    })
  ],

});

export default store; // 导出 store 以供其他地方使用
